<template>
  <div>
    <section class="banner-main">
      <p class="p1">基于阿里AI构建的果品识别系统</p>
      <p class="p2">目前支持60种水果和16种坚果</p>
    </section>
    <section class="banner">
      <el-upload
        class="upload-demo"
        :action="uploadUrl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success="handleSuccess"
        :on-error="handleError"
        :data="userData"
        list-type="picture-card"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件
        </div>
      </el-upload>
    </section>
    <main>
      <section class="change">
        <section class="title">
          <h2>果品</h2>
          <p>目前支持60种水果和16种坚果</p>
        </section>
        <ul>
          <li>
            <a href="#"
              ><img src="../../assets/img/icon1.png" width="85" height="65"
            /></a>
            <h3>橘子</h3>
            <span>有营养啊....</span>
          </li>
          <li>
            <a href="#"
              ><img src="../../assets/img/icon2.png" width="85" height="65"
            /></a>
            <h3>木瓜</h3>
            <span>有营养啊....</span>
          </li>
          <li>
            <a href="#"
              ><img src="../../assets/img/icon3.png" width="85" height="65"
            /></a>
            <h3>荔枝</h3>
            <span>有营养啊....</span>
          </li>
          <li>
            <a href="#"
              ><img src="../../assets/img/icon4.png" width="85" height="65"
            /></a>
            <h3>草莓</h3>
            <span>有营养啊....</span>
          </li>
        </ul>
      </section>
      <section class="show-tab-main">
        <section class="clear"></section>
        <section class="more"><a href="#">查看更多</a></section>
      </section>
      <!--/show-->

      <section class="about">
        <section class="about-main">
          <p>AI果品识别是基于阿里AI构建果品识别系统。</p>
            从2012年开始，深度学习席卷了图像识别领域，在图像分类、目标检测、语义分割等领域秒杀了传统的方法，AI果品分析也在这次浪潮之中。
          <p></p>
        </section>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: "Single",
  data() {
    return {
      fileList: [],
      uploadUrl: "http://101.200.181.33:8989/api/record/file",
      userData: {
        userId: window.sessionStorage.getItem("user"),
      },
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 监听图片上传成功
    handleSuccess(response) {
      console.log(response);
      if (response.code === 200) {
        this.$notify({
          title: "识别完成",
          message: "这是" + response.data.name,
          duration: 10000,
          type: "success",
        });
      } else {
        this.$notify({
          title: "识别失败",
          message: response.message,
          duration: 5000,
          type: "error",
        });
      }
    },

    handleError(err) {
      console.log(err);
      this.$notify({
        title: "识别失败",
        message: err.message,
        duration: 5000,
        type: "error",
      });
    },
  },
};
</script>

<style src="../../assets/css/base.css" scoped></style>
<style scoped>
.upload-demo {
  text-align: center;
  height: 400px;
  overflow-y: auto;
}
.el-upload__tip {
  color: #fff;
}
.el-upload-list li {
  margin-bottom: 40px;
}
.el-upload--picture-card {
  background-color: #a4dc88;
}
</style>
